import data from './data.json';
import { Col, Row, Typography } from 'antd';
import StackGroupColumn from './StackGroupColumn';
import Battle from './Battle';
import './App.css';

export default function Home() {
    return (
        <div className="app">
            <Row gutter={[16, 16]}>
                <Col span={24}>
                    <div className="main">
                        <Typography.Title level={4}>每日战况</Typography.Title>
                        <div className="battle-container">
                            {[...data.list].reverse().map(item => <Battle data={item} key={item.game_id} />)}
                        </div>
                    </div>
                </Col>
                <Col span={8}>
                    <StackGroupColumn attr="damage" title="伤害" />
                </Col>
                <Col span={8}>
                    <StackGroupColumn attr="taken" title="承伤" />
                </Col>
                <Col span={8}>
                    <StackGroupColumn
                        attr={item => Number((item.score / 10000).toFixed(1))}
                        title="评分"
                    />
                </Col>
                <Col span={12}>
                    <StackGroupColumn
                        attr={item => Number((item.dpg + item.tpg).toFixed(1))}
                        title="经济转化率 (伤害/金币 + 承伤/金币)"
                    />
                </Col>
                <Col span={12}>
                    <StackGroupColumn
                        attr={item => Number(((item.k + item.a) / (item.d + 1)).toFixed(1))}
                        title="KDA"
                    />
                </Col>
            </Row>
        </div>
    );
}